<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小鸡子,露出黑脚了吧</title>
	</head>
	<style>
		@keyframes leftAndRight {
			25% {transform: translateX(-30px);}
			50%,100% {transform: translateX(0);}
			75% {transform: translateX(30px);}
		}
		*{
			margin: 0;
			padding: 0;
		}
		body{
			display: flex;
		}
		video,canvas{
			border-radius: 20px;
			
		}
		#video,#cvs,#cvs2{
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -320px;
			margin-left: -600px;
			animation: leftAndRight 6s infinite linear;
			transition:width 1s ease-out;
		}
		#cvs{
			opacity: 0;
			z-index: 1;
		}
		#video{
			margin-top: -300px;
			z-index: 1;
			filter: blur(20px);
		}
		#cvs2{
			z-index: 2;
			background-color: #fff;
		}
	</style>
	<body>
		<video src="./video/cxk.mp4" loop oncanplay="init()" width="1200px" id="video"></video>
		<canvas id="cvs"></canvas>
		<canvas id="cvs2" onclick="changePlay()"></canvas>
	</body>
	<script>
		/*
			Dev: @M1_1ke
		*/
		var isPlay = false
		const init = () =>{
			const ctx = cvs.getContext('2d')
			const ctx2 = cvs2.getContext('2d')
			var isChange = false
			cvs.height = cvs2.height = video.offsetHeight
			cvs.width = cvs2.width = video.offsetWidth
			const playVideo = () =>{
				requestAnimationFrame(playVideo)
				const {width,height} = cvs
				//视频转画布
				ctx.drawImage(video,0,0,width,height)
				//获取当前帧data
				const data = ctx.getImageData(0,0,width,height).data
				
				//清除画布
				ctx2.clearRect(0,0,width,height)
				//稀释比例
				const bl = 10
				//字号
				ctx2.font = '12px serif'
				if(isChange){
					for(let i=0;i<data.length;i+=4*bl){
						const x = parseInt((i+1)%(width*4)/4)
						const y = parseInt(i/(width*4))
						if(x%bl===0 && y%bl===0){
							//转灰度
							const g = parseInt((data[i]+data[i+1]+data[i+2])/2.5)
							ctx2.fillStyle = `rgba(${g},${g},${g},${data[i+3]})`
							
							ctx2.fillText('K',x,y)
						}
					}
				}else{
					for(let i=0;i<data.length;i+=4*bl){
						const x = parseInt((i+1)%(width*4)/4)
						const y = parseInt(i/(width*4))
						if(x%bl===0 && y%bl===0){
							ctx2.fillStyle = `rgba(${data[i]},${data[i+1]},${data[i+2]},${data[i+3]})`
							ctx2.fillText('M',x,y)
						}
					}
				}
			}
			playVideo()
			
			setInterval(()=>{
				isChange = !isChange
			},3000)
		}
		
		const changePlay = () => {
			isPlay = !isPlay
			if(isPlay){
				return video.play()
			}else{
				return video.pause()
			}
		}
	</script>
</html>